import React, { useState } from "react";
import { Space, Table, Button, Switch } from "antd";
import type { TableProps } from "antd";
interface DataType {
  key: string;
  id: number;
  name: string;
  img: string;
  place: string;
  status: boolean;
  electro: string;
}
const columns: TableProps<DataType>["columns"] = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 190,
    render: (text) => <>{text}</>,
  },
  {
    title: "设备维修人员",
    dataIndex: "name",
    key: "name",
    width: 190,
    render: (text) => <a>{text}</a>,
  },
  {
    title: "实时监测图",
    dataIndex: "img",
    key: "img",
    width: 190,
    render: (text) => <img src={text} width={50} height={50} alt="" />,
  },
  {
    title: "场地使用",
    dataIndex: "place",
    key: "place",
    width: 190,
  },
  {
    title: "设备检测",
    key: "status",
    dataIndex: "status",
    width: 190,
    render: (status) => (
      <Switch
        checkedChildren="正常"
        unCheckedChildren="损坏"
        defaultChecked
        checked={status}
      />
    ),
  },
  {
    title: "实时用电",
    dataIndex: "electro",
    key: "electro",
    width: 190,
  },
  {
    title: "操作",
    key: "action",
    fixed: "right",
    width: 250,
    render: () => (
      <Space size="middle">
        <Button type="primary">查看</Button>
        <Button type="primary">编辑</Button>
        <Button type="primary">删除</Button>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: "1",
    id: 213541321,
    name: "子墨",
    img: "/src/assets/img/jcimg.jpg",
    place: "一层饮水机",
    status: true,
    electro: "12%",
  },
  {
    key: "2",
    id: 213541321,
    name: "小强",
    img: "/src/assets/img/jcimg.jpg",
    place: "一层监控",
    status: false,
    electro: "12%",
  },
  {
    key: "3",
    id: 213541321,
    name: "肥皂",
    img: "/src/assets/img/jcimg.jpg",
    place: "二层饮水机",
    status: true,
    electro: "12%",
  },
  {
    key: "4",
    id: 213541321,
    name: "睡魔",
    img: "/src/assets/img/jcimg.jpg",
    place: "二层监控",
    status: false,
    electro: "12%",
  },
];
function FacCom() {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        scroll={{ x: 1200 }}
      />
    </div>
  );
}

export default FacCom;

